import React, { useMemo, Fragment } from "react";
import { Button, Row } from "antd";
import ProJsonSchemaForm, {createForm, ISchema} from "vendor/components/pro-jsonSchemaForm";

const TestJsonSchemaForm: React.FC = () => {
    const form = useMemo(() => createForm({
        initialValues: {
            name: "",
            dataSourceType: "",
        }
    }), []);

    const handleSubmit = () => {
        form.validate().then(() => {
            const state = form.getFormState();
            if (!state.invalid) {
                console.log("表单数据:",state.values)
            } else {
            }
        }).catch((e: any) => {
            console.error("保存数据源报错->", e)
        })
    }

    return <Fragment>
        <h4>json schema表单</h4>
        <ProJsonSchemaForm form={form} schema={schema}/>
        <Row justify="center">
            <Button type="primary" onClick={handleSubmit}>提交</Button>
        </Row>
    </Fragment>
};

export default TestJsonSchemaForm

const schema: ISchema = {
    "type": "object",
    "properties": {
        no_field: {
            "type": "void",
            "x-component": "FormLayout",
            "x-component-props": {
                labelCol: "6",
                wrapperCol: "12",
            },
            "properties": {
                "name": {
                    "title": "数据源名称",
                    "x-component": "input",
                    "x-decorator": "FormItem",
                    "x-validator": [{required: true, message: "请填写数据源名称!"}],
                    default: ""
                },
                "dataSourceType": {
                    "title": "数据源类型",
                    "x-component": "select",
                    "x-decorator": "FormItem",
                    "x-validator": [{required: true, message: "请选择数据源类型!"}],
                    "enum":[
                        {"label":"MySQL", "value": "mysql"},
                        {"label":"Oracle", "value": "oracle"},
                        {"label":"Sqlserver", "value": "sqlserver"},
                        {"label":"postgresql", "value": "postgresql"},
                    ],
                    default: ""
                },
            },
        }
    },
}